<template>
  <div class="Film">
    <div class="FilmInner">
      <div class="select">
        <!-- 类型选择 -->
        <div class="lineOne">
          <span>类型:</span>
          <div class="Check" v-for="(item, index) in type" :key="index">
            <div class="active" v-if="index === currentType">{{ item }}</div>
            <div v-if="index !== currentType" @click="currentType = index">
              {{ item }}
            </div>
          </div>
        </div>
        <!-- 地区选择 -->
        <div class="lineOne">
          <span>地区:</span>
          <div class="Check" v-for="(item, index) in area" :key="index">
            <div class="active" v-if="index === currentArea">{{ item }}</div>
            <div v-if="index !== currentArea" @click="currentArea = index">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!-- 电影展示 -->
      <div class="movieshow">
        <div
          v-for="(movie, index) in FilmList"
          :key="index"
          class="movie"
          @click="gotoDetail(movie.id)"
        >
          <div class="filmimg">
            <img :src="movie.cover" alt="" />
          </div>
          <br />
          <span>{{ movie.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../Layout/Header.vue";
import Footer from "../Layout/Footer.vue";
import { nowplaying } from "@/api/user.js";
export default {
  name: "Film",
  data() {
    return {
      currentType: 0,
      currentArea: 0,
      type: [
        "全部",
        "家庭",
        "惊悚",
        "科幻",
        "爱情",
        "动作",
        "喜剧",
        "恐怖",
        "悬疑",
        "犯罪",
        "战争",
        "历史",
        "武侠",
        "传记",
        "古装",
        "其他",
      ],
      area: [
        "全部",
        "内地",
        "香港",
        "台湾",
        "美国",
        "韩国",
        "日本",
        "泰国",
        "印度",
        "法国",
        "英国",
        "德国",
        "其他",
      ],
      FilmList: [
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
        {
          name: "XXXXX",
          url: require("@/assets/Home/u2097.svg"),
          type: "",
          area: "",
        },
      ],
    };
  },
  components: {
    Header,
    Footer,
  },
  methods: {
    gotoDetail: function (id) {
      this.$router.push({
        path: "/index/Details",
        query: {
          id,
        },
      });
    },
    getAllFilm: function () {
      nowplaying(this.type[this.currentType], this.area[this.currentArea]).then(
        (res) => {
          if (res.code === 200) {
            this.FilmList = res.data;
          }
        }
      );
    },
  },
  watch: {
    currentArea: function () {
      this.getAllFilm();
    },
    currentType: function () {
      this.getAllFilm();
    },
  },
  mounted() {
    this.getAllFilm();
  },
};
</script>

<style lang='less' scoped>
.Film {
  width: 100%;
  .FilmInner {
    width: 1440px;
    margin: 40px auto;
    .select {
      margin: 80px auto;
      width: 1100px;
      height: 100px;
      border: 1px solid gainsboro;
      .lineOne {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        height: 50%;
        span {
          align-self: center;
          margin: 0 10px 0 14px;
        }
        div {
          width: 65px;
          height: 50px;
          div {
            width: 50px;
            height: 30px;
            cursor: pointer;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
          }
          .active {
            background-color: red;
            border-radius: 15px;
          }
        }
      }
    }
    .movieshow {
      margin: 0 auto;
      width: 1100px;
      border: 1px solid red;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      .movie {
        margin: 0 0 40px 20px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
        .filmimg {
          overflow: hidden;
          img {
            width: 160px;
            height: 230px;
            transition: all 0.3s;
          }
        }
      }
      .movie:hover img {
        transform: scale(1.1);
      }
    }
  }
}
</style>